<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡牌升级系统测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .test-container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        .upgrade-info {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }
        .upgrade-info p {
            margin: 0;
            font-size: 1.1rem;
            color: #ffd700;
        }
        #upgrade-cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
            min-height: 200px;
        }
        .upgrade-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 150px;
            text-align: center;
            position: relative;
        }
        .upgrade-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
            border-color: #ffed4e;
        }
        .upgrade-card.selected {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #333;
            transform: scale(1.05);
        }
        .upgrade-card-name {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 8px;
        }
        .upgrade-card-cost {
            color: #ffd700;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        .upgrade-card-description {
            font-size: 0.8rem;
            opacity: 0.9;
            margin-bottom: 10px;
        }
        .upgrade-card-upgraded {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            border-color: #4CAF50;
            color: white;
        }
        .upgrade-card-upgraded::after {
            content: "已升级";
            position: absolute;
            top: -5px;
            right: -5px;
            background: #4CAF50;
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: bold;
        }
        .upgrade-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        .upgrade-actions button {
            padding: 12px 25px;
            font-size: 1rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .upgrade-actions button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .btn-primary {
            background: #4CAF50;
            color: white;
        }
        .btn-secondary {
            background: #f44336;
            color: white;
        }
        .card-pile {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        .card {
            display: inline-block;
            margin: 5px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            cursor: pointer;
        }
        .card:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .log {
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>卡牌升级系统测试</h1>
        
        <div class="upgrade-info">
            <p>花费: 50💰 | 剩余金币: <span id="upgrade-gold">200</span>💰</p>
        </div>
        
        <div id="upgrade-cards-container">
            <!-- 可升级的卡牌将在这里显示 -->
        </div>
        
        <div class="upgrade-actions">
            <button class="btn-secondary" onclick="cancelUpgrade()">取消</button>
        </div>
        
        <div class="card-pile">
            <h3>当前卡组</h3>
            <div id="current-deck"></div>
        </div>
        
        <div class="log">
            <h3>升级日志</h3>
            <div id="upgrade-log"></div>
        </div>
    </div>

    <script>
        // 卡牌升级系统测试
        class CardUpgradeTest {
            constructor() {
                this.playerGold = 200;
                this.battleLog = [];
                this.playerDeck = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '愤怒', cost: 1, type: 'skill', strength: 2, description: '获得2点力量' },
                    { name: '终结', cost: 2, type: 'attack', damage: 15, description: '造成15点伤害，消耗' },
                    { name: '疾风', cost: 1, type: 'attack', damage: 4, description: '造成4点伤害，抽1张牌' },
                    { name: '冥想', cost: 1, type: 'skill', block: 3, description: '获得3点护甲，抽1张牌' },
                    { name: '成长', cost: 1, type: 'skill', strength: 1, dexterity: 1, description: '获得1点力量和1点敏捷' }
                ];
                
                this.renderUpgradeCards();
                this.updateDeckDisplay();
            }
            
            renderUpgradeCards() {
                const container = document.getElementById('upgrade-cards-container');
                const goldDisplay = document.getElementById('upgrade-gold');
                
                goldDisplay.textContent = this.playerGold;

                // 获取唯一卡牌（按名称去重）
                const uniqueCards = this.getUniqueCards(this.playerDeck);
                const upgradeableCards = uniqueCards.filter(card => !card.upgraded);

                container.innerHTML = '';

                if (upgradeableCards.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: #ccc;">没有可升级的卡牌</p>';
                    return;
                }

                upgradeableCards.forEach(card => {
                    const cardElement = this.createUpgradeCardElement(card);
                    container.appendChild(cardElement);
                });
            }
            
            getUniqueCards(cards) {
                const uniqueMap = new Map();
                cards.forEach(card => {
                    if (!uniqueMap.has(card.name) || !uniqueMap.get(card.name).upgraded) {
                        uniqueMap.set(card.name, card);
                    }
                });
                return Array.from(uniqueMap.values());
            }
            
            createUpgradeCardElement(card) {
                const cardElement = document.createElement('div');
                cardElement.className = 'upgrade-card';
                cardElement.dataset.cardName = card.name;

                const upgradedCard = this.getUpgradedCard(card);
                
                cardElement.innerHTML = `
                    <div class="upgrade-card-name">${card.name}</div>
                    <div class="upgrade-card-cost">消耗: ${card.cost} → ${upgradedCard.cost}</div>
                    <div class="upgrade-card-description">
                        ${this.getCardUpgradeDescription(card, upgradedCard)}
                    </div>
                `;

                cardElement.addEventListener('click', () => {
                    this.selectCardForUpgrade(card);
                });

                return cardElement;
            }
            
            getCardUpgradeDescription(originalCard, upgradedCard) {
                let description = '';
                
                if (originalCard.damage && upgradedCard.damage) {
                    description += `伤害: ${originalCard.damage} → ${upgradedCard.damage}<br>`;
                }
                if (originalCard.block && upgradedCard.block) {
                    description += `护甲: ${originalCard.block} → ${upgradedCard.block}<br>`;
                }
                if (originalCard.strength && upgradedCard.strength) {
                    description += `力量: ${originalCard.strength} → ${upgradedCard.strength}<br>`;
                }
                if (originalCard.dexterity && upgradedCard.dexterity) {
                    description += `敏捷: ${originalCard.dexterity} → ${upgradedCard.dexterity}<br>`;
                }
                if (originalCard.description !== upgradedCard.description) {
                    description += upgradedCard.description;
                }

                return description || '效果增强';
            }
            
            selectCardForUpgrade(card) {
                if (this.playerGold < 50) {
                    this.addLog('金币不足！');
                    return;
                }

                // 升级卡牌
                this.upgradeCard(card);
                
                // 扣除金币
                this.playerGold -= 50;
                
                this.addLog(`升级卡牌: ${card.name} (花费50💰)`);
                
                // 重新渲染
                this.renderUpgradeCards();
                this.updateDeckDisplay();
            }
            
            upgradeCard(card) {
                const upgradedCard = this.getUpgradedCard(card);
                upgradedCard.upgraded = true;

                // 更新所有同名卡牌
                this.updateAllCardsWithName(card.name, upgradedCard);
            }
            
            getUpgradedCard(card) {
                const upgradedCard = { ...card };
                
                switch (card.name) {
                    case '攻击':
                        upgradedCard.damage = card.damage + 3;
                        upgradedCard.description = `造成${upgradedCard.damage}点伤害`;
                        break;
                    case '防御':
                        upgradedCard.block = card.block + 3;
                        upgradedCard.description = `获得${upgradedCard.block}点护甲`;
                        break;
                    case '愤怒':
                        upgradedCard.strength = (card.strength || 2) + 1;
                        upgradedCard.description = `获得${upgradedCard.strength}点力量`;
                        break;
                    case '坚韧':
                        upgradedCard.block = card.block + 2;
                        upgradedCard.strength = (card.strength || 1) + 1;
                        upgradedCard.description = `获得${upgradedCard.block}点护甲和${upgradedCard.strength}点力量`;
                        break;
                    case '终结':
                        upgradedCard.damage = card.damage + 5;
                        upgradedCard.description = `造成${upgradedCard.damage}点伤害，消耗`;
                        break;
                    case '疾风':
                        upgradedCard.damage = card.damage + 2;
                        upgradedCard.description = `造成${upgradedCard.damage}点伤害，抽1张牌`;
                        break;
                    case '冥想':
                        upgradedCard.block = card.block + 2;
                        upgradedCard.description = `获得${upgradedCard.block}点护甲，抽1张牌`;
                        break;
                    case '成长':
                        upgradedCard.strength = (card.strength || 1) + 1;
                        upgradedCard.dexterity = (card.dexterity || 1) + 1;
                        upgradedCard.description = `获得${upgradedCard.strength}点力量和${upgradedCard.dexterity}点敏捷`;
                        break;
                    default:
                        // 默认升级：减少1点消耗
                        if (upgradedCard.cost > 0) {
                            upgradedCard.cost = Math.max(0, upgradedCard.cost - 1);
                        }
                        break;
                }

                return upgradedCard;
            }
            
            updateAllCardsWithName(cardName, upgradedCard) {
                this.playerDeck.forEach(card => {
                    if (card.name === cardName) {
                        Object.assign(card, upgradedCard);
                    }
                });
            }
            
            updateDeckDisplay() {
                const container = document.getElementById('current-deck');
                container.innerHTML = '';
                
                this.playerDeck.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.innerHTML = `
                        <div><strong>${card.name}</strong></div>
                        <div>消耗: ${card.cost}</div>
                        <div>${card.description}</div>
                        ${card.upgraded ? '<div style="color: #4CAF50;">已升级</div>' : ''}
                    `;
                    container.appendChild(cardElement);
                });
            }
            
            addLog(message) {
                this.battleLog.push(message);
                this.updateLogDisplay();
            }
            
            updateLogDisplay() {
                const logContainer = document.getElementById('upgrade-log');
                logContainer.innerHTML = this.battleLog.map(log => `<div>${log}</div>`).join('');
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        }
        
        // 初始化测试
        const upgradeTest = new CardUpgradeTest();
        
        function cancelUpgrade() {
            upgradeTest.addLog('取消升级');
        }
    </script>
</body>
</html>
